<template>
  <el-popover :width="popoverWidth" placement="bottom-start" trigger="click" @show="treeShow">
    <el-tree
      ref="tree"
      :data="treeData"
      :default-expanded-keys="currentNodeKeys"
      :filter-node-method="filterNode"
      :highlight-current="true"
      :props="treeDefaultProps"
      :node-key="treeNodeKey"
      :style="treeStyle"
      style="width:270px; max-height:200px; overflow-y: scroll;"
      @node-click="handleNodeClick"
    >
      <span slot-scope="{ node }" :title="node.label" class="custom-tree-node">
        {{ node.label }}
      </span>
    </el-tree>
    <el-input
      slot="reference"
      v-model="inputName"
      size="small"
      clearable
      @input="filterInput"
      @change="changeInput"
    >
      <template slot="append">
        <span class="fa fa-search"></span>
      </template>
    </el-input>
  </el-popover>
</template>
<script>
export default {
  name: 'VTreeSelect',
  props: {
    // 弹窗的宽
    popoverWidth: {
      type: String,
      default: '300'
    },
    // 树的数据
    treeData: {
      type: Array,
      default: () => []
    },
    // 默认字段显示
    treeDefaultProps: {
      type: Object,
      default: () => {
        return {
          children: 'children',
          label: 'label'
        }
      }
    },
    // 默认字段显示
    treeStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 树关键字
    treeNodeKey: {
      type: String,
      default: 'uuid'
    },
    // 选择树对应的字段
    treeNodeName: {
      type: String,
      default: 'orgName'
    },
    // 选择键对应的值
    selectedKey: {
      type: String,
      default: ''
    },
    // 选择标签值
    selectedValue: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      inputName: this.selectedValue,
      inputKey: this.selectedKey
    }
  },
  computed: {
    currentNodeKeys () {
      const arr = []
      if (this.selectedKey) {
        arr[0] = this.selectedKey
      }
      return arr
    }
  },
  watch: {
    selectedValue (n, o) {
      console.log(n, o)
      this.inputName = n
    }
  },
  methods: {
    treeShow () {
      if (this.selectedKey) {
        this.$refs.tree.setCurrentKey(this.selectedKey)
      }
    },
    filterNode (value, data, node) {
      if (!value) return true
      return data[this.treeNodeName].indexOf(value) !== -1
    },
    // 选择
    handleNodeClick (data) {
      // this.ruleForm = Object.assign({}, this.ruleForm, { orgUuid: data.uuid, orgName: data.orgName })
      console.log(data)
      this.inputName = data[this.treeNodeName]
      this.inputKey = data[this.treeNodeKey]
      this.$emit('update:selectedValue', data[this.treeNodeName])
      this.$emit('update:selectedKey', data[this.treeNodeKey])
    },
    // 输入变化 时
    filterInput () {
      this.$refs.tree.filter(this.inputName)
    },
    changeInput () {
      this.$emit('update:selectedValue', this.inputName)
      this.$emit('update:selectedKey', this.inputKey)
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.custom-tree-node {
  display: inline-block;
  width: calc(100%-60px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
